<template>
  <section class="todoapp">
    <header class="header">

      <h1>todos -----</h1>
      <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="name" @keyup.enter="addName" />
    </header>

    <section class="main">
      全选
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allCheckeds" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li :class="item.done ? 'completed' : ''" v-for="(item, index) in  showList" :key="item.id">
          <div class="view">
            <!-- checked -->
            <input class="toggle" type="checkbox" v-model="item.done" />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="handlerDel(item.id)">del</button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
        <!-- <li>
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>Buy a unicorn</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Rule the web" />
        </li> -->
      </ul>
    </section>

    <footer class="footer">
      <span class="todo-count"><strong>{{ leftCount }}</strong> item left</span>
      <ul class="filters">
        <!-- <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li> -->

        <li v-for="item in filters" @click="changeActive(item)">
          <a href="#/active" :class="item === active ? 'selected' : ''">{{ item }}</a>
        </li>


      </ul>
      <button class="clear-completed" @click="clearDone">Clear completed</button>
    </footer>
  </section>
</template>

<script setup>
import { ref, computed } from 'vue'

import { storeToRefs } from 'pinia'
// 1  引入 
import { useTodoStore } from './store/todo'
// 2 调用 
const todoStore = useTodoStore()

console.log(todoStore)

// 获取pinia 里面的数据
const { list, getFlag, leftCount, filters, active, showList } = storeToRefs(todoStore)

console.log(list)
console.log(getFlag.value)


// 3  删除功能 

const handlerDel = (id) => {
  todoStore.delItem(id)
}

const name = ref(null)


//  添加数据
const addName = () => {
  console.log(name.value)
  todoStore.addItem(name.value)
  name.value = ''
}



//  全选的逻辑
const allCheckeds = computed({
  get () {
    return getFlag.value
  },
  set (val) {
    console.log(val) //  设置全选的状态
    todoStore.changeChecked(val)
  }
})

//   清除已经完成的  

const clearDone = () => {
  todoStore.clearDoneClick()
}



const changeActive = (data) => {
  // alert(data)
  // todoStore.changeActives(data)

  todoStore.currentActive(data)

}




//  一进入里面就从 缓存里面获取 之前存储的值


// //  监听 todos 里面的 list 数据变化了就存储最新的值  
console.log(todoStore)
todoStore.$subscribe(() => {
  console.log(list.value)
  // console.log('我被触发了')  
  window.localStorage.setItem('todo', JSON.stringify(list.value))
})



</script>

<style></style>